<template>
	<div style="color: white; margin-top: 30px; margin-left: 15px;height:31.9375rem;">
		 <table  width="100%"  cellpadding="2">
        <caption><h3>各城市超标污染源综合排名</h3></caption>
        <tr align="center" style="color:#21bfd9!important;">
            <td>排名</td>
            <td>城市</td>
            <td>污染数量</td>
            <td>正常</td>
            <td>超标</td>
        </tr>
		<tr align="center" >
			<td>1</td>
			<td>北京</td>
			<td>116</td>
			<td>52%</td>
			<td>42%</td>
		</tr>
		<tr align="center" style="color:#e85050 !important;">
			<td>2</td>
			<td>广州</td>
			<td>96</td>
			<td>56%</td>
			<td>44%</td>
		</tr>
		<tr align="center" style="color:#1bcfbc !important;">
			<td>3</td>
			<td>西安</td>
			<td>89</td>
			<td>66%</td>
			<td>34%</td>
		</tr>
		<tr align="center">
			<td>4</td>
			<td>上海</td>
			<td>79</td>
			<td>50%</td>
			<td>50%</td>
		</tr>
		<tr align="center">
			<td>5</td>
			<td>湖南</td>
			<td>66</td>
			<td>60%</td>
			<td>40%</td>
		</tr>
		<tr align="center">
			<td>6</td>
			<td>河北</td>
			<td>56</td>
			<td>67%</td>
			<td>33%</td>
		</tr>
		<tr align="center">
			<td>7</td>
			<td>成都</td>
			<td>49</td>
			<td>69%</td>
			<td>31%</td>
		</tr>
		<tr align="center">
			<td>8</td>
			<td>四川</td>
			<td>40</td>
			<td>71%</td>
			<td>29%</td>
		</tr>
		<tr align="center">
			<td>9</td>
			<td>辽宁</td>
			<td>35</td>
			<td>79%</td>
			<td>21%</td>
		</tr>
    </table>
    <div class="tip">
    	<p>1 污染数量分为两大类，天然污染源、人为污染源</p>
    	<span>2 2018年各城市超标污染源综合排名数据纯属虚拟</span>
    </div>
	</div>
</template>

<script>
</script>

<style scoped>
	tr{height: 2.5rem; font-family:'华文行楷'; font-size: 1.125rem;}
    h3{color:#21bfd9 !important;}
    .tip{font-size:  13px; margin-top: 30px;margin-left: -5px;}
    
</style>